<template>
	<view class="container">
		<custom-top></custom-top>
		<view class="padding">
			<view class="flex align-center">
				<image 
				:src="useStore.userinfo?.avatar ? useStore.userinfo.avatar : '../../static/logo.png'"
				 class="round margin-right" 
				 mode="aspectFill" 
				 @click="handelLogin">
				</image>
				<view class="flex flex-direction justify-center"
				@click="handleSetting"
				style="flex: 1;"
				>
					<view class="text-xl text-bold padding-bottom-sm">{{useStore.userinfo?.name || '欢迎使用心途'}}</view>
					<view class="text-gray">心途号:{{useStore.userinfo?.phone || 'XXX'}}</view>
				</view>
			</view>
			<view class="cu-list grid col-3 no-border">
				<view class="cu-item">
					<view class="">{{useStore.userinfo?.dynamicCount || 0}}</view>
					<text>动态</text>
				</view>
				<view class="cu-item">
					<view class="">{{useStore.userinfo?.followCount || 0}}</view>
					<text>关注</text>
				</view>
				<view class="cu-item">
					<view class="">{{useStore.userinfo?.fanCount || 0}}</view>
					<text>粉丝</text>
				</view>
			</view>
			<view class="margin-left-lg padding-left-sm margin-tb" 
			style="border-left: 2px solid purple;"
			>心理频道</view>
			<view class="cu-list menu" style="border-bottom: 1px solid #eee;">
				<view class="cu-item arrow" v-for="item in heartPath">
					<view class="content">
						<text :class="['iconfont', item.icon,'padding-right-sm']"></text>

						<text class="">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="margin-left-lg padding-left-sm margin-tb"
			 style="border-left: 2px solid purple;"
			 >常用工具</view>
			<view class="cu-list menu">
				<view class="cu-item arrow" v-for="item in tools">
					<view class="content">
						<text :class="['iconfont', item.icon,'padding-right-sm']"></text>
						<text class="">{{item.name}}</text>
					</view>
				</view>
			</view>
			<button v-if="useStore.userinfo" class="cu-btn block bg-gradual-purple" @click="handlLoginOut">退出登录</button>

		</view>
	</view>
</template>

<script setup lang="ts">
import { useAccount } from '@/store/user'

const useStore = useAccount()
const heartPath = [
	{
		name: '心理练习',
		icon: 'icon-ceping1'
	},
	{
		name: '冥想&白噪音',
		icon: 'icon-daoyu'
	}
]
const tools =[
	{
		"name": "看社区动态",
		"icon": "icon-piaoliuping", 
	},
	{
		"name": "看社区私信",
		"icon": "icon-tongzhi", 
	},
	{
		"name": "找心理咨询",
		"icon": "icon-renqun", 
	},
	{
		"name": "找同频互助",
		"icon": "icon-shouye1", 
	},
	{
		"name": "日签",
		"icon": "icon-xingxing1", 
	},
	{
		"name": "翻翻乐",
		"icon": "icon-jiaoyitixing", 
	},
	{
		"name": "戳泡泡",
		"icon": "icon-qingxushudong", 
	},
	{
		"name": "我的订单",
		"icon": "icon-zongheceping", 
	},
	{
		"name": "我的优惠券",
		"icon": "icon-youjian", 
	},
	{
		"name": "我的钱包",
		"icon": "icon-fenlei1", 
	},
	{
		"name": "联系客服",
		"icon": "icon-xiaoxi2", 
	},
	{
		"name": "兑换优惠卷",
		"icon": "icon-change-fill", 
	},
	{
		"name": "老心理测评",
		"icon": "icon-ceping", 
	}
]
// 检查是否登录，未登录则提示跳转登录页面
const checkLogin = () => {
    if (!useStore.userinfo) {
        uni.showModal({
            title: '当前处于未登录状态',
            content: '是否前往登录？',
            showCancel: true,
            success: ({ confirm, cancel }) => {
                if (confirm) {
                    handelLogin()
                }
            }
        })
        return false
    }
    return true
}

// 设置页面跳转
const handleSetting = () => {
    if (!checkLogin()) return
    uni.navigateTo({
        url: '/pages/TreeHole/setting'
    })
}

// 登录
const handelLogin = () => {
    try {
        uni.navigateTo({
            url: '/pages/TreeHole/login'
        })
    } catch (error) {
        console.error('跳转登录页面失败:', error)
    }
}

// 退出登录
const handlLoginOut = () => {
    useStore.logout()
    uni.showToast({
        title: '退出登录成功',
        icon: 'none',
    })
    uni.reLaunch({
        url: '/pages/TreeHole/index'
    })
}
</script>

<style lang="scss">
page{
	background-color: #FFF;
}
image{
	height: 80px;
	width: 80px;
}
.cu-item:after{
	border-bottom:0px !important;
}
// .container{
// 	 background-image: 
// 	    linear-gradient(90deg, #f5eff1 0%, #e3e1fd 100%),  /* 横向渐变 */
// 	    linear-gradient(to bottom, rgba(247,247,247,0) 0%, rgba(247,247,247,0.85) 100%);  /* 垂直渐变（透明度变化） */
	  
// 	  /* 混合模式：让两个渐变融合显示 */
// 	  background-blend-mode: overlay;
	  
// 	  height: 220upx; /* 顶部渐变区域高度 */
// 	  width: 100%;
// }
</style>